import { getReplyList } from '@/store/actions/article'
import { Comment } from '@/types/data'
import { RootState } from '@/types/store'
import { NavBar } from 'antd-mobile'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import CommentFooter from '../CommentFooter'
import CommentItem from '../CommentItem'
import NoComment from '../NoComment'
import styles from './index.module.scss'
type Props = {
  closePopup2?: () => void
  comment: Comment
}

export default function CommentReply({ closePopup2, comment }: Props) {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getReplyList(comment.com_id))
  }, [comment.com_id, dispatch])

  const reply = useSelector((state: RootState) => state.article.reply)

  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar className="transparent-navbar" onBack={() => closePopup2?.()}>
          <div>{comment.reply_count}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          {/* 原评论 */}
          <CommentItem comment={comment} type="origin"></CommentItem>
        </div>

        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>

          {/* <NoComment /> */}
          {reply.results?.length === 0 ? (
            <NoComment />
          ) : (
            reply.results?.map((item) => {
              return (
                <CommentItem
                  key={item.com_id}
                  type="reply"
                  comment={item}
                ></CommentItem>
              )
            })
          )}
        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        {/* <CommentFooter /> */}
      </div>
    </div>
  )
}
